<template>
    <div>
        <Tables 
        :title ='title' 
        :butns = 'butns' 
        :field = 'field' 
        :tableData ='tableData' 
        :animateShow = "animate_show"
        :pageSize='pageSize'
        :totalNum="total_num" 
        :collectField = "collect_field" 
        :dbClickDisabled ="true"
        :rankable ="true"
        :curPage ="cur_page" 
        :clearSelectItems="selectedItems" 
        :tableNotice="tableNotice"
        @reset="reset"  
        @loadData ="loadData" 
        @sentSelectedItems="getSelectedItems"
        @sentEditData="getEditData" 
        @changePageSize = 'changePageSize'
        @rankData = "rankData"
        >
            <div slot="filter">
                <flieImport :type="'hostap'" :title="title" :switch_btn='switch_btn' @getData='fileReload'></flieImport>
                <search :searchFiled="searchFiled" @searchEvent = "searchData"></search>
            </div>
        </Tables>
        <Modals 
        :id="'modal'" 
        :title ='title' 
        :field = 'field' 
        :collectField = "collect_field"
        :selectItem = "select_item" 
        :status = "status" 
        :errorMsg="errorMsg" 
        :type="type"
        :selectedItems="selectedItems" 
        :editData = "edit_data" 
        @sentErrorMsg = "getErrorMsg"
        @addEvent = 'addData'
        @delEvent = 'delData'
        ></Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
	import flieImport from 'components/common/flieImport'
	import search from 'components/common/search'
    import Modals from 'components/common/Modals'
    import defendService from 'services/defendService'
    import PageData from 'libs/PageData'
    export default {
		components:{
		    Tables,
			flieImport,
			search,
            Modals
	    },
        data() {
            return{
                title:this.$t('safeplot.navBtn7'),
                butns:[
                    {
                        type:'add',
                        name:this.$t('common.addBtn'),
                        event:'addEvent',
                        icon:'/static/img/add.png',
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:this.$t('common.delBtn'),
                        event:'delEvent',
                        icon:'/static/img/delete.png',
                        class:'del_btn',
                    }
                ],
                field: [
                    {
                        type:'checkbox',
                    },
                    {
                        type:'macinput',
                        label:this.$t('safeplot.accessTableTh1')  ,
                        name:'mac',
                        regex: /^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/,
                        requried:true, 
                        remark:this.$t('safeplot.remark1')  
                    },
                    {
                        type:'none',
                        label:this.$t('safeplot.accessTableTh2')  ,
                        name:'description',
                        regex:/^[\w\u4e00-\u9fa5]{1,16}$/,
                        requried:false, 
                        remark:this.$t('safeplot.remark1') ,
                        editable:true,       
                    }
                ],
                searchFiled:[
                    {
                        type:'macinput',
                        label:this.$t('safeplot.accessTableTh1') ,
                        name:'mac',
                        regex: /^([0-9A-Fa-f]{2}:){1,6}$/,
                    },
                    {
                        type:'text',
                        label:this.$t('safeplot.accessTableTh2') ,
                        name:'description'
                    }
                ],
                tableNotice:this.$t('safeplot.accessTableNotice'),
                tableData:[],
                pageSize: [10, 20, 40, 80],
                size:10,
                order: '',
                by: '',
                total_num:1,
                collect_field:'id',
                select_item:[],
                status:"",
                errorMsg:'',
                allowdata:'',
                allow_status:'',
                allow_errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
				cur_page:1,
                switch_btn:'',
                animate_show:false,
                filterData: {
                    mac: '',
                    description: ''
                }
            }
        },
        created() {
            this.loadData()
            this.getLetIn()
        },
        methods:{
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            },  
            fileReload () {
                this.cur_page = 1
                this.loadData()
            },
            loadData () {
                // if (params.oper=='find') {
                //     this.animate_show = true
                // }
                let params = {
                    page: this.cur_page,
                    row: this.size,
                    order: this.order,
                    by: this.by,
                    mac: this.filterData.mac,
                    description: this.filterData.description
                }
                this.status ='ing'
                defendService.getSafePolt(6, params)
                .then((res) => {
					
                     this.animate_show = false
					if (res.errcode === 0) {  
                        this.status ='ok'       
						this.total_num = res['6'].count
						// if (params.type=='add') {//添加完到最新一页
						// 	 page = this.total_num
						// } else if (params.type=='del'&&cur_page_date.length===0&&page>1) {//删除后当前页无数据，跳到前一页
						// 	 page--
						// }
                        // if (params.type=='del') {
                        //     this.selectedItems =[]
                        // }
                        this.tableData =  res['6'].data
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage	
                    }
				})
            },  
            getLetIn () {
                defendService.getLetIn()
                .then((res) => {
                    if (res.errcode === 0) {
                        this.switch_btn = String(res['28'])
                    }
                })
            },         
            popoverShow(ele,content) {//删除弹窗
				$(ele).attr({
					'data-toggle': 'popover',
                    'data-placement':"bottom",
					'data-content': content
				}).popover('show')
				setTimeout(function() {
					$(ele).popover('destroy')
				}, 1500)
            },
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.loadData()
            }, 
            rankData (param) {
                this.order = param.order 
                this.by = param.by
                this.loadData()
            },
            addData (data) {
                this.status ='ing'
                let sendStr = `${data.mac}`
                defendService.addSafePolt(6, {6: sendStr})
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.loadData()
                    } else {
                        this.status =''
                    }
                })
            },
            delData (data) {
                this.status ='ing'
                defendService.delSafePolt(6, {6: data.ids})
                .then((res) =>{
                    if (res.errcode === 0) {
                        this.status ='ok'
                        this.loadData()
                        this.selectedItems = []
                    } else {
                        this.status =''
                    }
                })
            },
            searchData (params) {
                this.filterData.mac = params.mac ? params.mac : ''
                this.filterData.description = params.description ? params.description : ''
                this.loadData()
            }
        }
    }
</script>